<template>
  <div>
    <Header style="margin-bottom: 10px padding: 0;"></Header>
    <div class="con">
      <el-card style="width: 1000px" class="card">
        <i class="el-icon-s-promotion"></i>&nbsp;
        <span class="classify">地产列表</span>
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 400px"
        >
          <el-table
            :data="CategoriesList"
            border
            :show-header="false"
            class="table"
            @row-click="clickFn"
          >
            <el-table-column prop="title" width="150">
              <template #default="{ row }">
                <img :src="row.image" alt="" class="pic" />
              </template>
            </el-table-column>

            <el-table-column prop="dest">
              <template #default="{ row }">
                <div class="right">
                  <div class="title">{{ row.title }}</div>
                  <div class="dest">{{ row.desc }}</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </div>

    <!-- 表格 -->

    <!-- 分页组件 -->
    <!-- </div> -->
    <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination
        layout="prev, pager, next"
        :page-size="page._limit"
        :current-page="new_page"
        :total="count"
        @current-change="changePage"
      />
    </el-row>

    <!-- 表格 -->

    <!-- 分页组件 -->

    <el-footer><Footer /></el-footer>
  </div>
</template>

<script>
import { getPropertyList, getPropertiesCount } from "../../api/property";
export default {
  data() {
    const _limit = 2;
    const _start = 0;
    return {
      new_page: 0,
      page: {
        //传入的参数
        _limit,
        _start,
      },
      count: 0, //总数据
      CategoriesList: [],
      countObj: {
        //要传入获取数据请求的参数
      },
    };
  },
  created() {
    //获取地产分类数据
    this.getPropertyList();
    this.getPropertiesCount();
  },
  methods: {
    //某一行点击触发 的事件
    clickFn(row, column, event) {
      console.log(row);
      //跳转到指定房产页面 并将id以传入url
      this.$router.push(`/detail/${row.id}`);
    },
    //点击切换按钮发送请求
    changePage(newPage) {
      console.log(newPage);
      this.new_page = newPage;
      this.page._start = (newPage - 1) * this.page._limit;
      this.getPropertyList(this.page);
    },
    async getPropertyList() {
      //判断是否有数据有就添加到page
      if (this.$route.params.id) {
        this.page = { ...this.page, category: this.$route.params.id };
      }
      if (this.$route.query.title_contains) {
        this.page = {
          ...this.page,
          title_contains: this.$route.query.title_contains,
        };
      }
      if (this.$route.query.agent) {
        this.page = { ...this.page, agent: this.$route.query.agent };
      }
      const res = await getPropertyList(this.page);
      console.log(this.page, "传入的数据参数");

      this.CategoriesList = res.data;
    },
    //获取数量
    async getPropertiesCount() {
      //判断是否要传入参数
      //通过地产分类点击进入,同params id 传入
      if (this.$route.params.id) {
        this.countObj = { ...this.countObj, category: this.$route.params.id };
      }
      //通过地产经济点击
      if (this.$route.query.agent) {
        this.countObj = { ...this.countObj, agent: this.$route.query.agent };
      }
      //通过首页搜索
      if (this.$route.query.title_contains) {
        this.countObj = {
          ...this.countObj,
          title_contains: this.$route.query.title_contains,
        };
      }
      const res = await getPropertiesCount(this.countObj);
      console.log(this.countObj, "传入数量的参数");

      console.log(res, "地产的数量");
      //通过返回数据 判断页数
      this.count = res.data;
    },
  },
};
</script>

<style scoped>
.classify {
  font-size: 20px;
  color: coral;
}
.el-icon-s-promotion {
  font-size: 30px;
  color: coral;
}
.card {
  margin: 0 auto;
  margin-top: 20px;
}
.table {
  text-align: center;
}

.title {
  font-size: 20px;
  font-weight: 700;
}
.right {
  text-align: center;
}
.cell {
  line-height: 180px;
}
.pic {
  width: 100%;
  height: 150px;
  object-fit: contain;
}
.con {
  margin-top: 90px;
  margin-bottom: 70px;
}
</style>